<!-- Page header -->
<style>
  .container {
   height: 180px;
   overflow-y: scroll;
  margin-top: 80px;
  }
  .data, th, td {
   border: 1px solid black;
   border-collapse: collapse;
   padding: 4px;
  
  }
  
  #myChart1{
    margin-top: 100px;
  }
  
  </style>
<div class="container">
  <div>查看抑郁问卷测评分数：</div>
  <hr>
  <table border="1px" id="tab1" class="data">
    <thead>
      <tr>
        <th>序号&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>测试时间&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>总分&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>总均分&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>阳性回答数&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>躯体化&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>强迫症状&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>人际关系敏感&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>抑郁&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>焦虑&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>敌对&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>恐怖&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>偏执&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>精神病&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>其他&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
      </tr>
    </thead>
    <tbody id = "tb"></tbody>
  </table>
</div>
  <canvas id="myChart1" width="600" height="130"></canvas>

<!-- Page body -->

<script>

  $(function() {


    //========================= 查询用户scl测评记录 =======================
$.ajax({
      type : 'get',
      url : 'scl90/selectAll',
      success : function(respDate) {
        
        //判断状态码
        if(respDate.code == 0) {
         //构造页面
		 buidHistoryHtml(respDate.data);
		 getValue(respDate.data);

        }else {
          $.toast({
            heading: '警告',
            text: respDate.message,
            icon: 'warning' 
          });
        }
      },
      error : function() {
        $.toast({
          heading: '错误',
          text: '服务器错误，请联系管理员',
          icon: 'error' 
        });
      }

    });

	function buidHistoryHtml(data) {
		let table = document.getElementById("tab1");
		let newRow = table.insertRow();

		let tbody = document.getElementById('tb');

		

		
		for(let i = 0; i < data.length; i++) {

			var trow = getDataRow(data[i]);
			tbody.appendChild(trow);
		}
	}

	function getDataRow(h){  
     var row = document.createElement('tr'); //创建行  
       
     var cellId = document.createElement('td'); //创建第一列id  
     cellId.innerHTML = h.id; //填充数据  
     row.appendChild(cellId); //加入行  ，下面类似  
       
     var cellCreateState = document.createElement('td');//创建第二列name  
     cellCreateState.innerHTML = h.createState;  
     row.appendChild(cellCreateState);  
       
     var cellScore = document.createElement('td');//创建第三列job  
     cellScore.innerHTML = h.score;  
     row.appendChild(cellScore);  

	 
	 var cellToTalAverage = document.createElement('td');//创建第三列job  
     cellToTalAverage.innerHTML = h.totalAverage;  
     row.appendChild(cellToTalAverage);  

	 var cellPositive_Num = document.createElement('td');//创建第三列job  
     cellPositive_Num.innerHTML = h.positive_Num;  
     row.appendChild(cellPositive_Num);  

	 var cellSomatization = document.createElement('td');//创建第三列job  
     cellSomatization.innerHTML = h.somatization;  
     row.appendChild(cellSomatization);  

	 var cellForced = document.createElement('td');//创建第三列job  
     cellForced.innerHTML = h.forced;  
     row.appendChild(cellForced);  

	 var cellRelationship = document.createElement('td');//创建第三列job  
     cellRelationship.innerHTML = h.relationship;  
     row.appendChild(cellRelationship);  

	 var cellDepression = document.createElement('td');//创建第三列job  
     cellDepression.innerHTML = h.depression;  
     row.appendChild(cellDepression);  

	 var cellAnxiety = document.createElement('td');//创建第三列job  
     cellAnxiety.innerHTML = h.anxiety;  
     row.appendChild(cellAnxiety);  

	 var cellHostile = document.createElement('td');//创建第三列job  
     cellHostile.innerHTML = h.hostile;  
     row.appendChild(cellHostile);  

	 var cellTerror = document.createElement('td');//创建第三列job  
     cellTerror.innerHTML = h.terror;  
     row.appendChild(cellTerror);  

	 var cellBigotry = document.createElement('td');//创建第三列job  
     cellBigotry.innerHTML = h.bigotry;  
     row.appendChild(cellBigotry);  

	 var cellMentally = document.createElement('td');//创建第三列job  
     cellMentally.innerHTML = h.mentally;  
     row.appendChild(cellMentally);  

	 var cellOther = document.createElement('td');//创建第三列job  
     cellOther.innerHTML = h.other;  
     row.appendChild(cellOther); 
	 return row; //返回tr数据      
 }      

 function getValue(postData) {
	const ctx = document.getElementById('myChart1');
	const labels = [];
	const somatization = [];
	const forced = [];
	const relationship = [];
	const depression = [];
	const anxiety = [];
	const hostile = [];
	const terror = [];
	const bigotry = [];
	const mentally = [];
	const other = [];

	for(let i = 0; i < postData.length; i++) {
		labels[i] = postData[i].createState;
		somatization[i] = postData[i].somatization;
		forced[i] = postData[i].forced;
		relationship[i] = postData[i].relationship;
		depression[i] = postData[i].depression;
		anxiety[i] = postData[i].anxiety;
		hostile[i] = postData[i].hostile;
		terror[i] = postData[i].terror;
		bigotry[i] = postData[i].bigotry;
		mentally[i] = postData[i].mentally;
		other[i] = postData[i].other;
	}

	console.log("查看数据结构集");
	console.log(labels);
	console.log(somatization);
	console.log(forced);
	console.log(relationship);
	console.log(depression);
	console.log(anxiety);
	console.log(hostile);
	console.log(terror);
	console.log(bigotry);
	console.log(mentally);
	console.log(other);

	if(postData.length == 0) {
		console.log("没有测评数据！");
		alert("您目前还没有该份问卷的测评记录，请先进行填写问卷！");
		return 0;
	} else {
		console.log("有一条以上的数据！");
		const data = {
			labels: labels,
			datasets: [
				{
				label: '躯体化',
				data: somatization,
                fill: false,
                borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
                tension: 0.1
			   },
			   {
				label: '强迫症状',
				data: forced,
                fill: false,
                borderColor: 'rgb(255, 51, 100)', // 设置线的颜色
                tension: 0.1
			   },
			   {
				label: '人际关系敏感',
				data: relationship,
                fill: false,
                borderColor: 'rgb(255, 51, 190)', // 设置线的颜色
                tension: 0.1
			   },
			   {
				label: '抑郁',
				data: depression,
                fill: false,
                borderColor: 'rgb(175, 51, 255)', // 设置线的颜色
                tension: 0.1
			   },
			   {
				label: '焦虑',
				data: anxiety,
                fill: false,
                borderColor: 'rgb(51, 255, 141)', // 设置线的颜色
                tension: 0.1
			   },
			   {
				label: '敌对',
				data: hostile,
                fill: false,
                borderColor: 'rgb(184, 255, 51)', // 设置线的颜色
                tension: 0.1
			   },
			   {
				label: '恐怖',
				data: terror,
                fill: false,
                borderColor: 'rgb(255, 193, 51)', // 设置线的颜色
                tension: 0.1
			   },
			   {
				label: '偏执',
				data: bigotry,
                fill: false,
                borderColor: 'rgb(29, 27, 22)', // 设置线的颜色
                tension: 0.1
			   },
			   {
				label: '精神病',
				data: mentally,
                fill: false,
                borderColor: 'rgb(141, 138, 132)', // 设置线的颜色
                tension: 0.1
			   },
			   {
				label: '其他',
				data: other,
                fill: false,
                borderColor: 'rgb(133, 96, 11)', // 设置线的颜色
                tension: 0.1
			   }
			]
		};
		const config = {
			type: 'line', // 设置图表类型
			data: data,
		};
		console.log("-------------------");
		const myChart = new Chart(ctx, config);
	}
 }
  });
  
  
</script>